<template>
  <div id="wft-page-h5-preview" class="animate__animated">
    <div class="tool">
      <el-button circle icon="Close" class="wft-preview-close" @click="$emit('close')" />
    </div>
    <div class="container">
      <div class="page-generate-h5-container-outer">
        <div class="page-generate-h5-container" :style="mobileContainerPanelPreviewStyle">
          <div
            v-if="panelJson.isGlobal"
            class="wft-mobie-top-navigation"
            :style="{ color: navigationConfig.navigationBarTextStyle, backgroundColor: navigationConfig.navigationBarBackgroundColor }"
          ><b>{{ navigationConfig.navigationBarTitleText }}</b></div>
          <DynamicComp v-for="item in renderComps" :key="item.id" :comp="item" :panel-json="panelJson" />
          <component v-for="item in inertiaComps" :key="item.id" :is="`${item.key}Temp`" :cur-comp="item" :panel-json="panelJson" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import DynamicComp from './dynamicComp.vue';
import { panelJsonDefault } from 'generator/index/Layout/ConfigPanel/widget/default'
import { useContainerPanelStyle } from 'generator/hooks'

const renderComps = ref<TComp[]>([])
const inertiaComps = ref<TComp[]>([])

const props = withDefaults(defineProps<{
  panelJson?: TPanel
}>(), {
  panelJson: () => panelJsonDefault
})

const { mobileContainerPanelStyle: mobileContainerPanelPreviewStyle } = useContainerPanelStyle(props.panelJson)

const navigationConfig = computed(() => {
  if (props.panelJson.isGlobal) {
    return (props.panelJson.children[0] as unknown as TGlobalComp)?.attrs?.globalStyle || {}
  }
  return <{[key: string]: any}>{}
})

onMounted(() => {
  if(props.panelJson.isGlobal) {
    renderComps.value = props.panelJson.children
    inertiaComps.value = []
    return
  }
  renderComps.value = props.panelJson.children.filter(comp => comp.config.visible && comp.type !== 'inertia')
  inertiaComps.value = props.panelJson.children.filter(comp => comp.type === 'inertia')
})

function init() {
  const pageH5PreviewEl = document.getElementById('wft-page-h5-preview')!
  pageH5PreviewEl.classList.add('animate__jackInTheBox')
  pageH5PreviewEl.classList.remove('animate__zoomOut')
}

function close() {
  const pageH5PreviewEl = document.getElementById('wft-page-h5-preview')!
  pageH5PreviewEl.classList.add('animate__zoomOut')
  pageH5PreviewEl.classList.remove('animate__jackInTheBox')
}

defineExpose({ init, close })
</script>
<style scoped>
#wft-page-h5-preview {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, .8);
}

#wft-page-h5-preview > .tool {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  position: relative;
}

#wft-page-h5-preview > .container {
  width: 100%;
  height: calc(100% - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.wft-preview-close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.wft-w-130 {
  width: 130px;
}

.page-generate-h5-container-outer {
  width: 410px;
  height: 820px;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}

.page-generate-h5-container {
  position: relative;
  overflow: hidden;
}

.wft-mobie-top-navigation {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  text-align: center;
  line-height: 44px;
  font-weight: 600;
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  box-sizing: border-box;
}

/* 滚动条有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
  border-radius: 5px;
}

/* 滚动条滑块(竖向:vertical 横向:horizontal) */
::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: rgba(70, 70, 73, .1);
  border-radius: 5px;
}

/* 滚动条滑块hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #c7c9cc;
}

/* 同时有垂直和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {
  display: block;
  background-color: #f5f5f5;
}
</style>
